<template>
  <div class="family-manage-view">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-text">
          <h1 class="page-title">家庭管理</h1>
          <p class="page-subtitle">管理家庭成员、邀请新成员，设置权限和隐私</p>
        </div>
        <div class="header-actions">
          <button class="action-btn primary" @click="showInviteDialog = true">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" stroke="currentColor" stroke-width="2"/>
              <circle cx="9" cy="7" r="4" stroke="currentColor" stroke-width="2"/>
              <line stroke="currentColor" stroke-width="2" x1="19" x2="19" y1="8" y2="14"/>
              <line stroke="currentColor" stroke-width="2" x1="22" x2="16" y1="11" y2="11"/>
            </svg>
            邀请成员
          </button>
        </div>
      </div>
    </div>

    <!-- 家庭信息 -->
    <div class="family-info-section">
      <div class="family-card">
        <div class="family-avatar">
          <img v-if="familyInfo.avatar" :alt="familyInfo.name" :src="familyInfo.avatar" />
          <div v-else class="avatar-placeholder">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" stroke="currentColor" stroke-width="2"/>
              <circle cx="12" cy="7" r="4" stroke="currentColor" stroke-width="2"/>
            </svg>
          </div>
        </div>
        <div class="family-details">
          <div class="family-name-section">
            <h2 v-if="!editingFamilyName" class="family-name">{{ familyInfo.name }}</h2>
            <input
              v-else
              ref="familyNameInput"
              v-model="editFamilyName"
              class="family-name-input"
              @blur="saveFamilyName"
              @keydown.enter="saveFamilyName"
            />
            <button v-if="!editingFamilyName" class="edit-btn" @click="startEditFamilyName">
              <svg fill="none" viewBox="0 0 24 24">
                <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" stroke="currentColor" stroke-width="2"/>
                <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" stroke="currentColor" stroke-width="2"/>
              </svg>
            </button>
          </div>
          <p class="family-description">{{ familyInfo.description }}</p>
          <div class="family-stats">
            <div class="stat-item">
              <span class="stat-number">{{ familyInfo.memberCount }}</span>
              <span class="stat-label">成员</span>
            </div>
            <div class="stat-item">
              <span class="stat-number">{{ familyInfo.mediaCount }}</span>
              <span class="stat-label">媒体文件</span>
            </div>
            <div class="stat-item">
              <span class="stat-number">{{ familyInfo.diaryCount }}</span>
              <span class="stat-label">日记</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 成员列表 -->
    <div class="members-section">
      <div class="section-header">
        <h3 class="section-title">
          <svg fill="none" viewBox="0 0 24 24">
            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" stroke="currentColor" stroke-width="2"/>
            <circle cx="9" cy="7" r="4" stroke="currentColor" stroke-width="2"/>
            <path d="M23 21v-2a4 4 0 0 0-3-3.87" stroke="currentColor" stroke-width="2"/>
            <path d="M16 3.13a4 4 0 0 1 0 7.75" stroke="currentColor" stroke-width="2"/>
          </svg>
          家庭成员 ({{ familyMembers.length }})
        </h3>
        <div class="section-controls">
          <div class="view-toggle">
            <button
              :class="{ active: viewMode === 'grid' }"
              class="toggle-btn"
              @click="viewMode = 'grid'"
            >
              <svg fill="none" viewBox="0 0 24 24">
                <rect height="7" stroke="currentColor" stroke-width="2" width="7" x="3" y="3"/>
                <rect height="7" stroke="currentColor" stroke-width="2" width="7" x="14" y="3"/>
                <rect height="7" stroke="currentColor" stroke-width="2" width="7" x="14" y="14"/>
                <rect height="7" stroke="currentColor" stroke-width="2" width="7" x="3" y="14"/>
              </svg>
            </button>
            <button
              :class="{ active: viewMode === 'list' }"
              class="toggle-btn"
              @click="viewMode = 'list'"
            >
              <svg fill="none" viewBox="0 0 24 24">
                <line stroke="currentColor" stroke-width="2" x1="3" x2="21" y1="6" y2="6"/>
                <line stroke="currentColor" stroke-width="2" x1="3" x2="21" y1="12" y2="12"/>
                <line stroke="currentColor" stroke-width="2" x1="3" x2="21" y1="18" y2="18"/>
              </svg>
            </button>
          </div>
        </div>
      </div>

      <!-- 网格视图 -->
      <div v-if="viewMode === 'grid'" class="members-grid">
        <div
          v-for="member in familyMembers"
          :key="member.id"
          class="member-card"
        >
          <div class="member-avatar">
            <img v-if="member.avatar" :alt="member.name" :src="member.avatar" />
            <div v-else class="avatar-placeholder">
              {{ getAvatarInitials(member.name) }}
            </div>
            <div :class="member.status" class="member-status"></div>
          </div>
          <div class="member-info">
            <h4 class="member-name">{{ member.name }}</h4>
            <p class="member-role">{{ getRoleLabel(member.role) }}</p>
            <div class="member-meta">
              <span class="member-join-date">{{ formatDate(member.joinedAt) }}加入</span>
              <span class="member-activity">{{ getActivityStatus(member.lastActiveAt) }}</span>
            </div>
          </div>
          <div class="member-actions">
            <button class="action-btn" title="查看详情" @click="viewMemberDetail(member)">
              <svg fill="none" viewBox="0 0 24 24">
                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" stroke="currentColor" stroke-width="2"/>
                <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
              </svg>
            </button>
            <button
              v-if="member.role !== 'owner' && currentUser.role === 'owner'"
              class="action-btn danger"
              title="移除成员"
              @click="removeMember(member)"
            >
              <svg fill="none" viewBox="0 0 24 24">
                <line stroke="currentColor" stroke-width="2" x1="18" x2="6" y1="6" y2="18"/>
                <line stroke="currentColor" stroke-width="2" x1="6" x2="18" y1="6" y2="18"/>
              </svg>
            </button>
          </div>
        </div>
      </div>

      <!-- 列表视图 -->
      <div v-else class="members-list">
        <div class="list-header">
          <div class="header-cell name">姓名</div>
          <div class="header-cell role">角色</div>
          <div class="header-cell joined">加入时间</div>
          <div class="header-cell activity">最后活跃</div>
          <div class="header-cell actions">操作</div>
        </div>
        <div
          v-for="member in familyMembers"
          :key="member.id"
          class="member-row"
        >
          <div class="row-cell name">
            <div class="member-avatar small">
              <img v-if="member.avatar" :alt="member.name" :src="member.avatar" />
              <div v-else class="avatar-placeholder">
                {{ getAvatarInitials(member.name) }}
              </div>
              <div :class="member.status" class="member-status"></div>
            </div>
            <div class="member-details">
              <h4 class="member-name">{{ member.name }}</h4>
              <p class="member-email">{{ member.email }}</p>
            </div>
          </div>
          <div class="row-cell role">
            <span :class="member.role" class="role-badge">
              {{ getRoleLabel(member.role) }}
            </span>
          </div>
          <div class="row-cell joined">
            {{ formatDate(member.joinedAt) }}
          </div>
          <div class="row-cell activity">
            <span :class="getActivityClass(member.lastActiveAt)">
              {{ getActivityStatus(member.lastActiveAt) }}
            </span>
          </div>
          <div class="row-cell actions">
            <button class="action-btn small" title="查看详情" @click="viewMemberDetail(member)">
              <svg fill="none" viewBox="0 0 24 24">
                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" stroke="currentColor" stroke-width="2"/>
                <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
              </svg>
            </button>
            <button
              v-if="member.role !== 'owner' && currentUser.role === 'owner'"
              class="action-btn small danger"
              title="移除成员"
              @click="removeMember(member)"
            >
              <svg fill="none" viewBox="0 0 24 24">
                <line stroke="currentColor" stroke-width="2" x1="18" x2="6" y1="6" y2="18"/>
                <line stroke="currentColor" stroke-width="2" x1="6" x2="18" y1="6" y2="18"/>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 待处理邀请 -->
    <div v-if="pendingInvitations.length > 0" class="invitations-section">
      <div class="section-header">
        <h3 class="section-title">
          <svg fill="none" viewBox="0 0 24 24">
            <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" stroke="currentColor" stroke-width="2"/>
            <polyline points="22,6 12,13 2,6" stroke="currentColor" stroke-width="2"/>
          </svg>
          待处理邀请 ({{ pendingInvitations.length }})
        </h3>
      </div>

      <div class="invitations-list">
        <div
          v-for="invitation in pendingInvitations"
          :key="invitation.id"
          class="invitation-card"
        >
          <div class="invitation-info">
            <div class="invitation-email">{{ invitation.email }}</div>
            <div class="invitation-meta">
              <span class="invitation-role">邀请为{{ getRoleLabel(invitation.role) }}</span>
              <span class="invitation-date">{{ formatDate(invitation.sentAt) }}发送</span>
            </div>
          </div>
          <div class="invitation-status">
            <span :class="invitation.status" class="status-badge">
              {{ getInvitationStatusLabel(invitation.status) }}
            </span>
          </div>
          <div class="invitation-actions">
            <button class="action-btn secondary" @click="resendInvitation(invitation)">
              <svg fill="none" viewBox="0 0 24 24">
                <polyline points="23,4 23,10 17,10" stroke="currentColor" stroke-width="2"/>
                <path d="M20.49,15a9,9,0,1,1-2.12-9.36L23,10" stroke="currentColor" stroke-width="2"/>
              </svg>
              重发
            </button>
            <button class="action-btn danger" @click="cancelInvitation(invitation)">
              <svg fill="none" viewBox="0 0 24 24">
                <line stroke="currentColor" stroke-width="2" x1="18" x2="6" y1="6" y2="18"/>
                <line stroke="currentColor" stroke-width="2" x1="6" x2="18" y1="6" y2="18"/>
              </svg>
              取消
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 家庭设置 -->
    <div class="settings-section">
      <div class="section-header">
        <h3 class="section-title">
          <svg fill="none" viewBox="0 0 24 24">
            <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" stroke="currentColor" stroke-width="2"/>
          </svg>
          家庭设置
        </h3>
      </div>

      <div class="settings-grid">
        <div class="setting-card">
          <div class="setting-icon">
            <svg fill="none" viewBox="0 0 24 24">
              <rect height="11" rx="2" ry="2" stroke="currentColor" stroke-width="2" width="18" x="3" y="11"/>
              <circle cx="12" cy="16" r="1" stroke="currentColor" stroke-width="2"/>
              <path d="M7 11V7a5 5 0 0 1 10 0v4" stroke="currentColor" stroke-width="2"/>
            </svg>
          </div>
          <div class="setting-content">
            <h4 class="setting-title">隐私设置</h4>
            <p class="setting-description">控制家庭内容的可见性和访问权限</p>
          </div>
          <button class="setting-action">
            <svg fill="none" viewBox="0 0 24 24">
              <polyline points="9,18 15,12 9,6" stroke="currentColor" stroke-width="2"/>
            </svg>
          </button>
        </div>

        <div class="setting-card">
          <div class="setting-icon">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" stroke="currentColor" stroke-width="2"/>
            </svg>
          </div>
          <div class="setting-content">
            <h4 class="setting-title">存储管理</h4>
            <p class="setting-description">查看和管理家庭存储空间使用情况</p>
          </div>
          <button class="setting-action">
            <svg fill="none" viewBox="0 0 24 24">
              <polyline points="9,18 15,12 9,6" stroke="currentColor" stroke-width="2"/>
            </svg>
          </button>
        </div>

        <div class="setting-card">
          <div class="setting-icon">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke="currentColor" stroke-width="2"/>
            </svg>
          </div>
          <div class="setting-content">
            <h4 class="setting-title">安全设置</h4>
            <p class="setting-description">两步验证、登录通知等安全功能</p>
          </div>
          <button class="setting-action">
            <svg fill="none" viewBox="0 0 24 24">
              <polyline points="9,18 15,12 9,6" stroke="currentColor" stroke-width="2"/>
            </svg>
          </button>
        </div>
      </div>
    </div>

    <!-- 邀请成员弹窗 -->
    <div v-if="showInviteDialog" class="modal-overlay" @click="showInviteDialog = false">
      <div class="modal-dialog" @click.stop>
        <div class="modal-header">
          <h3>邀请新成员</h3>
          <button class="modal-close" @click="showInviteDialog = false">
            <svg fill="none" viewBox="0 0 24 24">
              <line stroke="currentColor" stroke-width="2" x1="18" x2="6" y1="6" y2="18"/>
              <line stroke="currentColor" stroke-width="2" x1="6" x2="18" y1="6" y2="18"/>
            </svg>
          </button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label class="form-label">邮箱地址</label>
            <input
              v-model="inviteForm.email"
              class="form-input"
              placeholder="请输入要邀请的邮箱地址"
              type="email"
            />
          </div>
          <div class="form-group">
            <label class="form-label">角色权限</label>
            <select v-model="inviteForm.role" class="form-select">
              <option value="member">成员 - 可查看和上传内容</option>
              <option value="admin">管理员 - 可管理内容和部分设置</option>
            </select>
          </div>
          <div class="form-group">
            <label class="form-label">邀请消息（可选）</label>
            <textarea
              v-model="inviteForm.message"
              class="form-textarea"
              placeholder="添加一些个人消息..."
              rows="3"
            ></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button class="modal-btn secondary" @click="showInviteDialog = false">取消</button>
          <button
            :disabled="!inviteForm.email || isSending"
            class="modal-btn primary"
            @click="sendInvitation"
          >
            {{ isSending ? '发送中...' : '发送邀请' }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { Notify } from '@opentiny/vue'

const router = useRouter()

interface FamilyMember {
  id: string
  name: string
  email: string
  avatar?: string
  role: 'owner' | 'admin' | 'member'
  status: 'online' | 'offline' | 'away'
  joinedAt: Date
  lastActiveAt: Date
}

interface PendingInvitation {
  id: string
  email: string
  role: 'admin' | 'member'
  status: 'pending' | 'expired'
  sentAt: Date
}

interface FamilyInfo {
  id: string
  name: string
  description: string
  avatar?: string
  memberCount: number
  mediaCount: number
  diaryCount: number
}

// 响应式数据
const viewMode = ref<'grid' | 'list'>('grid')
const editingFamilyName = ref(false)
const editFamilyName = ref('')
const showInviteDialog = ref(false)
const isSending = ref(false)
const familyNameInput = ref<HTMLInputElement>()

const familyInfo = ref<FamilyInfo>({
  id: '1',
  name: '温馨的家',
  description: '记录我们一家人的美好时光',
  memberCount: 5,
  mediaCount: 1234,
  diaryCount: 89
})

const currentUser = ref({
  id: '1',
  role: 'owner'
})

const familyMembers = ref<FamilyMember[]>([
  {
    id: '1',
    name: '张爸爸',
    email: 'dad@example.com',
    role: 'owner',
    status: 'online',
    joinedAt: new Date('2023-01-01'),
    lastActiveAt: new Date('2024-01-20T18:00:00')
  },
  {
    id: '2',
    name: '李妈妈',
    email: 'mom@example.com',
    role: 'admin',
    status: 'online',
    joinedAt: new Date('2023-01-01'),
    lastActiveAt: new Date('2024-01-20T17:30:00')
  },
  {
    id: '3',
    name: '小明',
    email: 'xiaoming@example.com',
    role: 'member',
    status: 'away',
    joinedAt: new Date('2023-02-15'),
    lastActiveAt: new Date('2024-01-20T15:20:00')
  },
  {
    id: '4',
    name: '小红',
    email: 'xiaohong@example.com',
    role: 'member',
    status: 'offline',
    joinedAt: new Date('2023-03-10'),
    lastActiveAt: new Date('2024-01-19T20:10:00')
  },
  {
    id: '5',
    name: '爷爷',
    email: 'grandpa@example.com',
    role: 'member',
    status: 'offline',
    joinedAt: new Date('2023-06-01'),
    lastActiveAt: new Date('2024-01-18T10:30:00')
  }
])

const pendingInvitations = ref<PendingInvitation[]>([
  {
    id: '1',
    email: 'aunt@example.com',
    role: 'member',
    status: 'pending',
    sentAt: new Date('2024-01-18T10:00:00')
  },
  {
    id: '2',
    email: 'uncle@example.com',
    role: 'admin',
    status: 'pending',
    sentAt: new Date('2024-01-19T15:30:00')
  }
])

const inviteForm = ref({
  email: '',
  role: 'member',
  message: ''
})

// 工具函数
const getAvatarInitials = (name: string) => {
  return name.charAt(0).toUpperCase()
}

const getRoleLabel = (role: string) => {
  const labels = {
    owner: '家长',
    admin: '管理员',
    member: '成员'
  }
  return labels[role] || '成员'
}

const getInvitationStatusLabel = (status: string) => {
  const labels = {
    pending: '待接受',
    expired: '已过期'
  }
  return labels[status] || '未知'
}

const formatDate = (date: Date) => {
  const now = new Date()
  const diff = now.getTime() - date.getTime()
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))

  if (days === 0) return '今天'
  if (days === 1) return '昨天'
  if (days < 7) return `${days}天前`
  if (days < 30) return `${Math.floor(days / 7)}周前`
  if (days < 365) return `${Math.floor(days / 30)}个月前`

  return `${Math.floor(days / 365)}年前`
}

const getActivityStatus = (lastActiveAt: Date) => {
  const now = new Date()
  const diff = now.getTime() - lastActiveAt.getTime()
  const minutes = Math.floor(diff / (1000 * 60))
  const hours = Math.floor(minutes / 60)
  const days = Math.floor(hours / 24)

  if (minutes < 5) return '刚刚活跃'
  if (minutes < 60) return `${minutes}分钟前`
  if (hours < 24) return `${hours}小时前`
  if (days === 1) return '昨天'
  return `${days}天前`
}

const getActivityClass = (lastActiveAt: Date) => {
  const now = new Date()
  const diff = now.getTime() - lastActiveAt.getTime()
  const hours = Math.floor(diff / (1000 * 60 * 60))

  if (hours < 1) return 'active-now'
  if (hours < 24) return 'active-today'
  return 'active-old'
}

// 事件处理
const startEditFamilyName = async () => {
  editingFamilyName.value = true
  editFamilyName.value = familyInfo.value.name

  await nextTick()
  familyNameInput.value?.focus()
}

const saveFamilyName = () => {
  if (editFamilyName.value.trim()) {
    familyInfo.value.name = editFamilyName.value.trim()
    Notify({
      type: 'success',
      message: '家庭名称已更新',
      position: 'top-right'
    })
  }
  editingFamilyName.value = false
}

const sendInvitation = async () => {
  if (!inviteForm.value.email.trim()) return

  isSending.value = true

  try {
    // 模拟发送邀请
    await new Promise(resolve => setTimeout(resolve, 1500))

    // 添加到待处理列表
    pendingInvitations.value.push({
      id: Date.now().toString(),
      email: inviteForm.value.email,
      role: inviteForm.value.role as 'admin' | 'member',
      status: 'pending',
      sentAt: new Date()
    })

    // 重置表单
    inviteForm.value = {
      email: '',
      role: 'member',
      message: ''
    }

    showInviteDialog.value = false

    Notify({
      type: 'success',
      message: '邀请已发送',
      position: 'top-right'
    })

  } catch (error) {
    Notify({
      type: 'error',
      message: '发送邀请失败，请重试',
      position: 'top-right'
    })
  } finally {
    isSending.value = false
  }
}

const resendInvitation = async (invitation: PendingInvitation) => {
  try {
    await new Promise(resolve => setTimeout(resolve, 1000))

    invitation.sentAt = new Date()

    Notify({
      type: 'success',
      message: '邀请已重新发送',
      position: 'top-right'
    })
  } catch (error) {
    Notify({
      type: 'error',
      message: '重发邀请失败',
      position: 'top-right'
    })
  }
}

const cancelInvitation = (invitation: PendingInvitation) => {
  const index = pendingInvitations.value.findIndex(inv => inv.id === invitation.id)
  if (index > -1) {
    pendingInvitations.value.splice(index, 1)
    Notify({
      type: 'success',
      message: '邀请已取消',
      position: 'top-right'
    })
  }
}

const removeMember = async (member: FamilyMember) => {
  if (!confirm(`确定要移除成员 ${member.name} 吗？`)) return

  try {
    await new Promise(resolve => setTimeout(resolve, 1000))

    const index = familyMembers.value.findIndex(m => m.id === member.id)
    if (index > -1) {
      familyMembers.value.splice(index, 1)
      familyInfo.value.memberCount--

      Notify({
        type: 'success',
        message: `已移除成员 ${member.name}`,
        position: 'top-right'
      })
    }
  } catch (error) {
    Notify({
      type: 'error',
      message: '移除成员失败',
      position: 'top-right'
    })
  }
}

const viewMemberDetail = (member: FamilyMember) => {
  // 这里可以跳转到成员详情页或显示详情弹窗
  console.log('查看成员详情:', member)
}
</script>

<style lang="scss" scoped>
.family-manage-view {
  background: #f8fafc;
  min-height: 100vh;
  padding: 2rem 1rem;

  .page-header {
    max-width: 1200px;
    margin: 0 auto 2rem;

    .header-content {
      background: white;
      padding: 2rem;
      border-radius: 12px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      display: flex;
      justify-content: space-between;
      align-items: center;

      .header-text {
        .page-title {
          font-size: 2rem;
          font-weight: 700;
          color: #1e293b;
          margin: 0 0 0.5rem 0;
        }

        .page-subtitle {
          color: #64748b;
          margin: 0;
        }
      }

      .header-actions {
        .action-btn {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          padding: 0.75rem 1.5rem;
          border-radius: 8px;
          border: none;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.2s ease;

          svg {
            width: 18px;
            height: 18px;
          }

          &.primary {
            background: #3b82f6;
            color: white;

            &:hover {
              background: #2563eb;
              transform: translateY(-2px);
            }
          }
        }
      }
    }
  }

  .family-info-section {
    max-width: 1200px;
    margin: 0 auto 2rem;

    .family-card {
      background: white;
      padding: 2rem;
      border-radius: 12px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      display: flex;
      gap: 2rem;
      align-items: center;

      .family-avatar {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        overflow: hidden;
        flex-shrink: 0;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .avatar-placeholder {
          width: 100%;
          height: 100%;
          background: linear-gradient(135deg, #3b82f6, #1d4ed8);
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;

          svg {
            width: 40px;
            height: 40px;
          }
        }
      }

      .family-details {
        flex: 1;

        .family-name-section {
          display: flex;
          align-items: center;
          gap: 1rem;
          margin-bottom: 0.5rem;

          .family-name {
            font-size: 1.5rem;
            font-weight: 600;
            color: #1e293b;
            margin: 0;
          }

          .family-name-input {
            font-size: 1.5rem;
            font-weight: 600;
            color: #1e293b;
            border: 2px solid #3b82f6;
            border-radius: 6px;
            padding: 0.25rem 0.5rem;
            background: white;

            &:focus {
              outline: none;
              box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
            }
          }

          .edit-btn {
            background: rgba(59, 130, 246, 0.1);
            color: #3b82f6;
            border: none;
            border-radius: 6px;
            padding: 0.5rem;
            cursor: pointer;
            transition: all 0.2s ease;

            &:hover {
              background: rgba(59, 130, 246, 0.2);
            }

            svg {
              width: 16px;
              height: 16px;
            }
          }
        }

        .family-description {
          color: #64748b;
          margin: 0 0 1.5rem 0;
        }

        .family-stats {
          display: flex;
          gap: 2rem;

          .stat-item {
            text-align: center;

            .stat-number {
              display: block;
              font-size: 1.5rem;
              font-weight: 700;
              color: #3b82f6;
            }

            .stat-label {
              font-size: 0.9rem;
              color: #6b7280;
            }
          }
        }
      }
    }
  }

  .members-section,
  .invitations-section,
  .settings-section {
    max-width: 1200px;
    margin: 0 auto 2rem;

    .section-header {
      background: white;
      padding: 1.5rem 2rem;
      border-radius: 12px 12px 0 0;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      display: flex;
      justify-content: space-between;
      align-items: center;

      .section-title {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        font-size: 1.25rem;
        font-weight: 600;
        color: #1e293b;
        margin: 0;

        svg {
          width: 20px;
          height: 20px;
          color: #3b82f6;
        }
      }

      .section-controls {
        .view-toggle {
          display: flex;
          background: #f1f5f9;
          border-radius: 8px;
          padding: 0.25rem;

          .toggle-btn {
            padding: 0.5rem;
            border: none;
            background: transparent;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s ease;
            color: #6b7280;

            &.active {
              background: white;
              color: #3b82f6;
              box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            }

            svg {
              width: 16px;
              height: 16px;
            }
          }
        }
      }
    }
  }

  .members-grid {
    background: white;
    padding: 1.5rem;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;

    .member-card {
      border: 2px solid #e5e7eb;
      border-radius: 12px;
      padding: 1.5rem;
      text-align: center;
      transition: all 0.3s ease;

      &:hover {
        border-color: #3b82f6;
        box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
        transform: translateY(-4px);
      }

      .member-avatar {
        position: relative;
        width: 60px;
        height: 60px;
        margin: 0 auto 1rem;
        border-radius: 50%;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .avatar-placeholder {
          width: 100%;
          height: 100%;
          background: linear-gradient(135deg, #3b82f6, #1d4ed8);
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          font-weight: 600;
          font-size: 1.25rem;
        }

        .member-status {
          position: absolute;
          bottom: 0;
          right: 0;
          width: 16px;
          height: 16px;
          border-radius: 50%;
          border: 2px solid white;

          &.online { background: #22c55e; }
          &.away { background: #f59e0b; }
          &.offline { background: #9ca3af; }
        }
      }

      .member-info {
        margin-bottom: 1rem;

        .member-name {
          font-size: 1.1rem;
          font-weight: 600;
          color: #1e293b;
          margin: 0 0 0.25rem 0;
        }

        .member-role {
          color: #3b82f6;
          font-weight: 500;
          font-size: 0.9rem;
          margin: 0 0 0.5rem 0;
        }

        .member-meta {
          display: flex;
          flex-direction: column;
          gap: 0.25rem;
          font-size: 0.8rem;
          color: #6b7280;
        }
      }

      .member-actions {
        display: flex;
        justify-content: center;
        gap: 0.5rem;

        .action-btn {
          width: 32px;
          height: 32px;
          border: none;
          border-radius: 6px;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.2s ease;

          svg {
            width: 16px;
            height: 16px;
          }

          &:not(.danger) {
            background: rgba(59, 130, 246, 0.1);
            color: #3b82f6;

            &:hover {
              background: rgba(59, 130, 246, 0.2);
            }
          }

          &.danger {
            background: rgba(239, 68, 68, 0.1);
            color: #ef4444;

            &:hover {
              background: rgba(239, 68, 68, 0.2);
            }
          }
        }
      }
    }
  }

  .members-list {
    background: white;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;

    .list-header {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr 100px;
      gap: 1rem;
      padding: 1rem 1.5rem;
      background: #f8fafc;
      border-bottom: 1px solid #e5e7eb;
      font-weight: 600;
      color: #374151;
      font-size: 0.9rem;
    }

    .member-row {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr 100px;
      gap: 1rem;
      padding: 1rem 1.5rem;
      border-bottom: 1px solid #f1f5f9;
      transition: background 0.2s ease;

      &:hover {
        background: #f8fafc;
      }

      &:last-child {
        border-bottom: none;
      }

      .row-cell {
        display: flex;
        align-items: center;
        font-size: 0.9rem;

        &.name {
          gap: 1rem;

          .member-avatar {
            position: relative;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            overflow: hidden;
            flex-shrink: 0;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }

            .avatar-placeholder {
              width: 100%;
              height: 100%;
              background: linear-gradient(135deg, #3b82f6, #1d4ed8);
              display: flex;
              align-items: center;
              justify-content: center;
              color: white;
              font-weight: 600;
              font-size: 1rem;
            }

            .member-status {
              position: absolute;
              bottom: 0;
              right: 0;
              width: 12px;
              height: 12px;
              border-radius: 50%;
              border: 2px solid white;

              &.online { background: #22c55e; }
              &.away { background: #f59e0b; }
              &.offline { background: #9ca3af; }
            }
          }

          .member-details {
            .member-name {
              font-weight: 500;
              color: #1e293b;
              margin: 0 0 0.25rem 0;
              font-size: 0.95rem;
            }

            .member-email {
              color: #6b7280;
              margin: 0;
              font-size: 0.8rem;
            }
          }
        }

        &.role {
          .role-badge {
            padding: 0.25rem 0.75rem;
            border-radius: 15px;
            font-size: 0.8rem;
            font-weight: 500;

            &.owner {
              background: rgba(239, 68, 68, 0.1);
              color: #dc2626;
            }

            &.admin {
              background: rgba(59, 130, 246, 0.1);
              color: #2563eb;
            }

            &.member {
              background: rgba(107, 114, 128, 0.1);
              color: #6b7280;
            }
          }
        }

        &.activity {
          .active-now { color: #22c55e; }
          .active-today { color: #f59e0b; }
          .active-old { color: #9ca3af; }
        }

        &.actions {
          gap: 0.5rem;

          .action-btn {
            &.small {
              width: 28px;
              height: 28px;
              border: none;
              border-radius: 6px;
              cursor: pointer;
              display: flex;
              align-items: center;
              justify-content: center;
              transition: all 0.2s ease;

              svg {
                width: 14px;
                height: 14px;
              }

              &:not(.danger) {
                background: rgba(59, 130, 246, 0.1);
                color: #3b82f6;

                &:hover {
                  background: rgba(59, 130, 246, 0.2);
                }
              }

              &.danger {
                background: rgba(239, 68, 68, 0.1);
                color: #ef4444;

                &:hover {
                  background: rgba(239, 68, 68, 0.2);
                }
              }
            }
          }
        }
      }
    }
  }

  .invitations-list {
    background: white;
    padding: 1.5rem;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: 1rem;

    .invitation-card {
      display: flex;
      align-items: center;
      gap: 1.5rem;
      padding: 1rem;
      border: 2px solid #e5e7eb;
      border-radius: 8px;
      transition: border-color 0.2s ease;

      &:hover {
        border-color: #cbd5e1;
      }

      .invitation-info {
        flex: 1;

        .invitation-email {
          font-weight: 500;
          color: #1e293b;
          margin-bottom: 0.25rem;
        }

        .invitation-meta {
          display: flex;
          gap: 1rem;
          font-size: 0.85rem;
          color: #6b7280;
        }
      }

      .invitation-status {
        .status-badge {
          padding: 0.25rem 0.75rem;
          border-radius: 15px;
          font-size: 0.8rem;
          font-weight: 500;

          &.pending {
            background: rgba(249, 115, 22, 0.1);
            color: #ea580c;
          }

          &.expired {
            background: rgba(107, 114, 128, 0.1);
            color: #6b7280;
          }
        }
      }

      .invitation-actions {
        display: flex;
        gap: 0.5rem;

        .action-btn {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          padding: 0.5rem 1rem;
          border: none;
          border-radius: 6px;
          cursor: pointer;
          transition: all 0.2s ease;
          font-size: 0.85rem;
          font-weight: 500;

          svg {
            width: 14px;
            height: 14px;
          }

          &.secondary {
            background: #f3f4f6;
            color: #374151;

            &:hover {
              background: #e5e7eb;
            }
          }

          &.danger {
            background: rgba(239, 68, 68, 0.1);
            color: #ef4444;

            &:hover {
              background: rgba(239, 68, 68, 0.2);
            }
          }
        }
      }
    }
  }

  .settings-section {
    .section-header {
      border-radius: 12px 12px 0 0;
    }
  }

  .settings-grid {
    background: white;
    padding: 1.5rem;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;

    .setting-card {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1.5rem;
      border: 2px solid #e5e7eb;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        border-color: #3b82f6;
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
        transform: translateY(-2px);
      }

      .setting-icon {
        width: 50px;
        height: 50px;
        background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;

        svg {
          width: 24px;
          height: 24px;
          color: #475569;
        }
      }

      .setting-content {
        flex: 1;

        .setting-title {
          font-size: 1.1rem;
          font-weight: 600;
          color: #1e293b;
          margin: 0 0 0.25rem 0;
        }

        .setting-description {
          color: #6b7280;
          font-size: 0.9rem;
          margin: 0;
        }
      }

      .setting-action {
        background: none;
        border: none;
        color: #9ca3af;
        cursor: pointer;
        transition: color 0.2s ease;

        svg {
          width: 16px;
          height: 16px;
        }
      }

      &:hover .setting-action {
        color: #3b82f6;
      }
    }
  }

  .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;

    .modal-dialog {
      background: white;
      border-radius: 12px;
      width: 100%;
      max-width: 500px;
      margin: 1rem;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);

      .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1.5rem 1.5rem 1rem;
        border-bottom: 1px solid #f1f5f9;

        h3 {
          font-size: 1.25rem;
          font-weight: 600;
          color: #1e293b;
          margin: 0;
        }

        .modal-close {
          background: none;
          border: none;
          color: #6b7280;
          cursor: pointer;
          padding: 0.25rem;
          border-radius: 4px;
          transition: all 0.2s ease;

          &:hover {
            background: #f3f4f6;
            color: #374151;
          }

          svg {
            width: 20px;
            height: 20px;
          }
        }
      }

      .modal-body {
        padding: 1.5rem;

        .form-group {
          margin-bottom: 1.5rem;

          .form-label {
            display: block;
            font-size: 0.9rem;
            font-weight: 500;
            color: #374151;
            margin-bottom: 0.5rem;
          }

          .form-input,
          .form-select,
          .form-textarea {
            width: 100%;
            padding: 0.75rem;
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            font-size: 0.9rem;
            transition: border-color 0.2s ease;

            &:focus {
              outline: none;
              border-color: #3b82f6;
              box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
            }
          }

          .form-textarea {
            resize: vertical;
            min-height: 80px;
          }
        }
      }

      .modal-footer {
        display: flex;
        justify-content: flex-end;
        gap: 0.75rem;
        padding: 1rem 1.5rem 1.5rem;

        .modal-btn {
          padding: 0.75rem 1.5rem;
          border: none;
          border-radius: 8px;
          cursor: pointer;
          transition: all 0.2s ease;
          font-weight: 500;

          &.secondary {
            background: #f3f4f6;
            color: #374151;

            &:hover {
              background: #e5e7eb;
            }
          }

          &.primary {
            background: #3b82f6;
            color: white;

            &:hover:not(:disabled) {
              background: #2563eb;
            }

            &:disabled {
              opacity: 0.6;
              cursor: not-allowed;
            }
          }
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .family-manage-view {
    .members-grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .settings-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}

@media (max-width: 992px) {
  .family-manage-view {
    .page-header .header-content {
      flex-direction: column;
      gap: 1.5rem;
      text-align: center;
      padding: 2rem 1.5rem;

      .header-text .page-title {
        font-size: 1.9rem;
      }

      .header-actions .action-btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.95rem;
      }
    }

    .family-info-section .family-card {
      flex-direction: column;
      text-align: center;
      gap: 1.75rem;
      padding: 2rem 1.5rem;

      .family-avatar {
        width: 90px;
        height: 90px;
        align-self: center;
      }

      .family-details {
        .family-name-section {
          justify-content: center;

          .family-name,
          .family-name-input {
            font-size: 1.35rem;
          }
        }

        .family-stats {
          justify-content: center;
          gap: 1.75rem;

          .stat-item {
            .stat-number {
              font-size: 1.4rem;
            }

            .stat-label {
              font-size: 0.85rem;
            }
          }
        }
      }
    }

    .members-grid {
      grid-template-columns: 1fr;
      gap: 1.25rem;
    }

    .settings-grid {
      grid-template-columns: 1fr;
      gap: 1.25rem;
    }
  }
}

@media (max-width: 768px) {
  .family-manage-view {
    padding: 1rem 0.5rem;

    .page-header .header-content {
      flex-direction: column;
      gap: 1rem;
      text-align: center;
      padding: 1.5rem;

      .header-text .page-title {
        font-size: 1.75rem;
      }

      .header-actions .action-btn {
        padding: 0.75rem 1.25rem;
        font-size: 0.9rem;
      }
    }

    .family-info-section .family-card {
      flex-direction: column;
      text-align: center;
      gap: 1.5rem;
      padding: 1.5rem;

      .family-avatar {
        width: 80px;
        height: 80px;
        align-self: center;
      }

      .family-details {
        .family-name-section {
          justify-content: center;

          .family-name,
          .family-name-input {
            font-size: 1.25rem;
          }
        }

        .family-stats {
          justify-content: center;
          gap: 1.5rem;

          .stat-item {
            .stat-number {
              font-size: 1.25rem;
            }

            .stat-label {
              font-size: 0.8rem;
            }
          }
        }
      }
    }

    .section-header {
      flex-direction: column;
      gap: 1rem;
      text-align: center;
      padding: 1.5rem;

      .section-title {
        font-size: 1.1rem;
      }

      .section-controls .view-toggle {
        justify-content: center;
      }
    }

    .members-grid {
      grid-template-columns: 1fr;
      gap: 1rem;
      padding: 1rem;

      .member-card {
        padding: 1.25rem;

        .member-avatar {
          width: 50px;
          height: 50px;

          .member-status {
            width: 14px;
            height: 14px;
          }
        }

        .member-info {
          .member-name {
            font-size: 1rem;
          }

          .member-role {
            font-size: 0.85rem;
          }

          .member-meta {
            font-size: 0.75rem;
          }
        }

        .member-actions {
          gap: 0.4rem;

          .action-btn {
            width: 28px;
            height: 28px;

            svg {
              width: 14px;
              height: 14px;
            }
          }
        }
      }
    }

    .members-list {
      .list-header,
      .member-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        text-align: left;
      }

      .list-header {
        display: none;
      }

      .member-row {
        display: flex;
        flex-direction: column;
        padding: 1rem;

        .row-cell {
          &.name {
            order: 1;
          }
          &.role {
            order: 2;
            justify-content: flex-start;
          }
          &.joined {
            order: 3;
            font-size: 0.8rem;
            color: #6b7280;
          }
          &.activity {
            order: 4;
            font-size: 0.8rem;
          }
          &.actions {
            order: 5;
            justify-content: flex-start;
            margin-top: 0.5rem;
          }
        }
      }
    }

    .settings-grid {
      grid-template-columns: 1fr;
    }

    .modal-dialog {
      margin: 0.5rem;
    }

    .invitations-section .invitations-list {
      padding: 1rem;
      gap: 0.75rem;

      .invitation-card {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;

        .invitation-info {
          .invitation-email {
            font-size: 0.9rem;
            margin-bottom: 0.5rem;
          }

          .invitation-meta {
            flex-direction: column;
            gap: 0.5rem;
            font-size: 0.8rem;
          }
        }

        .invitation-actions {
          justify-content: stretch;
          gap: 0.75rem;

          .action-btn {
            flex: 1;
            font-size: 0.85rem;
            padding: 0.6rem 1rem;
          }
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .family-manage-view {
    padding: 0.75rem 0.25rem;

    .page-header .header-content {
      padding: 1.25rem;

      .header-text .page-title {
        font-size: 1.5rem;
      }

      .header-actions .action-btn {
        padding: 0.6rem 1rem;
        font-size: 0.85rem;

        svg {
          width: 16px;
          height: 16px;
        }
      }
    }

    .family-info-section .family-card {
      padding: 1.25rem;
      gap: 1.25rem;

      .family-avatar {
        width: 70px;
        height: 70px;
      }

      .family-details {
        .family-name-section {
          .family-name,
          .family-name-input {
            font-size: 1.1rem;
          }

          .edit-btn {
            padding: 0.4rem;

            svg {
              width: 14px;
              height: 14px;
            }
          }
        }

        .family-stats {
          gap: 1.25rem;

          .stat-item {
            .stat-number {
              font-size: 1.1rem;
            }

            .stat-label {
              font-size: 0.75rem;
            }
          }
        }
      }
    }

    .section-header {
      padding: 1.25rem;

      .section-title {
        font-size: 1rem;

        svg {
          width: 18px;
          height: 18px;
        }
      }
    }

    .members-grid {
      padding: 0.75rem;
      gap: 0.75rem;

      .member-card {
        padding: 1rem;

        .member-avatar {
          width: 45px;
          height: 45px;

          .member-status {
            width: 12px;
            height: 12px;
          }
        }

        .member-info {
          .member-name {
            font-size: 0.9rem;
          }

          .member-role {
            font-size: 0.8rem;
          }

          .member-meta {
            font-size: 0.7rem;
          }
        }

        .member-actions {
          gap: 0.3rem;

          .action-btn {
            width: 26px;
            height: 26px;

            svg {
              width: 12px;
              height: 12px;
            }
          }
        }
      }
    }

    .members-list {
      .member-row {
        padding: 0.75rem;

        .row-cell.name {
          .member-avatar.small {
            width: 35px;
            height: 35px;

            .member-status {
              width: 10px;
              height: 10px;
            }
          }

          .member-details {
            .member-name {
              font-size: 0.85rem;
            }

            .member-email {
              font-size: 0.75rem;
            }
          }
        }

        .row-cell.actions {
          .action-btn.small {
            width: 24px;
            height: 24px;

            svg {
              width: 12px;
              height: 12px;
            }
          }
        }
      }
    }

    .invitations-section .invitations-list {
      padding: 0.75rem;

      .invitation-card {
        padding: 0.75rem;

        .invitation-info {
          .invitation-email {
            font-size: 0.85rem;
          }

          .invitation-meta {
            font-size: 0.75rem;
          }
        }

        .invitation-actions {
          gap: 0.5rem;

          .action-btn {
            font-size: 0.8rem;
            padding: 0.5rem 0.75rem;

            svg {
              width: 12px;
              height: 12px;
            }
          }
        }
      }
    }

    .settings-grid {
      gap: 0.75rem;

      .setting-card {
        padding: 1.25rem;
        gap: 0.75rem;

        .setting-icon {
          width: 40px;
          height: 40px;

          svg {
            width: 20px;
            height: 20px;
          }
        }

        .setting-content {
          .setting-title {
            font-size: 1rem;
          }

          .setting-description {
            font-size: 0.85rem;
            line-height: 1.4;
          }
        }

        .setting-action {
          svg {
            width: 14px;
            height: 14px;
          }
        }
      }
    }

    .modal-dialog {
      margin: 0.25rem;

      .modal-header {
        padding: 1.25rem 1.25rem 0.75rem;

        h3 {
          font-size: 1.1rem;
        }
      }

      .modal-body {
        padding: 1.25rem;

        .form-group {
          margin-bottom: 1.25rem;

          .form-label {
            font-size: 0.85rem;
            margin-bottom: 0.4rem;
          }

          .form-input,
          .form-select,
          .form-textarea {
            padding: 0.6rem;
            font-size: 0.9rem;
          }
        }
      }

      .modal-footer {
        padding: 0.75rem 1.25rem 1.25rem;
        gap: 0.5rem;

        .modal-btn {
          padding: 0.6rem 1.25rem;
          font-size: 0.9rem;
        }
      }
    }
  }
}
</style>
